<template>
    <!-- 某个刻印查看具体信息 (名字、词条、词条效果、位置等信息) -->
    <!-- 接收参数 engrViewShow是否显示  engrViewData刻印对象 affixOptions刻印字典对象-->
    <!-- 返回事件 close -->
    <van-popup v-if="isShow && affixList" v-model="isShow" closeable round position="bottom" :style="{ height: '60%' }">
        <van-row class="engr-view-first">
            <van-col span="2" offset="1">
                <van-image width="40" height="40" :src="engrViewData.icon" />
            </van-col>
            <van-col><b>{{ engrViewData.name }}{{ engrViewData.location }}</b></van-col>
        </van-row>

        <van-row style="margin-top:10px;">
            <van-col offset="1">
                <van-button plain type="primary">{{ engrViewData.location }}</van-button>
                <van-button plain type="primary">{{ engrViewData.location | locationWord }}</van-button>
                <van-button plain type="primary">{{ engrViewData.type }}</van-button>
            </van-col>
        </van-row>

        <!-- 词条1 -->
        <template name="affix1">
            <van-row style="margin-top:20px;">
                <van-col offset="1">
                    <van-button class="engr-view-button" plain
                        :type="$options.filters.getButtonTypeByAffix(engrViewData.affix1)">
                        <template #icon>
                            <van-image class="engr-view-button-image"  width="40" height="40"
                                :src="affixOptions[engrViewData.affix1].icon">
                            </van-image>
                        </template>
                        {{ engrViewData.affix1 }}
                    </van-button>
                </van-col>
            </van-row>

            <van-row style="margin-top:20px;">
                <van-col offset="1">
                    {{ affixOptions[engrViewData.affix1].text }}
                </van-col>
            </van-row>
        </template>

        <!-- 词条2 -->
        <template name="affix2">
            <van-row style="margin-top:20px;">
                <van-col offset="1">
                    <van-button class="engr-view-button" plain
                        :type="$options.filters.getButtonTypeByAffix(engrViewData.affix2)">
                        <template #icon>
                            <van-image class="engr-view-button-image" width="40" height="40"
                                :src="affixOptions[engrViewData.affix2].icon">
                            </van-image>
                        </template>
                        {{ engrViewData.affix2 }}
                    </van-button>
                </van-col>
            </van-row>

            <van-row style="margin-top:20px;">
                <van-col offset="1">
                    {{ affixOptions[engrViewData.affix2].text }}
                </van-col>
            </van-row>
        </template>

        <van-divider />

        <!-- 套装效果 -->
        <template name="effect">
            <van-row style="margin-top:20px;">
            <van-col offset="1" span="22">{{engrViewData.effect}}</van-col>
            </van-row>
        </template>
    </van-popup>
</template>

<script>
const locWrods = ['I', 'II', 'III', 'IV', 'V', 'VI'];
const btnTypeAffix = ['', 'danger', 'danger', 'info', 'warning'];
let vm;

export default {
    name: "CalcResultView",

    components: {},

    computed: {
        isShow: {
            get() {
                return this.engrViewShow;
            },
            set(val) {
                this.$emit("close");
            }
        }
    },

    props: {
        engrViewData: Object,
        engrViewShow: Boolean,
        affixOptions: Object,
        affixList: Array,
    },


    beforeCreate() {
        vm = this;
    },

    filters: {
        //用vm代替this

        locationWord(data) {
            return locWrods[data - 1]
        },

        getButtonTypeByAffix(data) {
            let type = 0;
            vm.affixList.some(e => {
                if (e.name == data) {
                    type = e.type;
                    return true;
                }
            })
            return btnTypeAffix[type];
        },
    },

    methods: {

        //根据词条分类 设置button的type
        getButtonByAffixType(val) {
            if (val <= 2) {
                return "danger";
            } else if (val == 3) {
                return "info";
            } else {
                return "warning";
            }
        },
    }
}

</script>
<style scoped>
.engr-view-first {
    margin-top: 20px;
}

.engr-view-first b {
    display: inline-block;
    height: 40px;
    line-height: 40px;
}

.engr-view-button{
    height: 40px;
    width: 140px;
    position:relative;
}

.engr-view-button-image {
    height: 40px; 
    width:  40px;
    position: absolute;
    top: 0px;
    left: 0px;
}
</style>
